<template>
  <!-- 专题 -->
  <div class="subjectview">
    <TopComponents />
    <div class="subject">
      <div
        class="subject-item"
        v-for="(item ,index) in state.index_img"
        :key="index"
         @click="Jump(item.sid)"
      >
        <div class="img"><img :src="item.img" alt=""/></div>
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="top" v-show="data.top" v-on:click="goTop()"></div>
  </div>
</template>

<script>
import TopComponents from "../components/TopComponents.vue";
import { getsubject_lists } from "../api/subject.js";
import { reactive } from "@vue/reactivity";

import { getCurrentInstance } from "vue";
import { useRouter  } from "vue-router";
// import { query } from "express";

export default {
  components: {
    TopComponents,
  },
  setup() {
    const router = useRouter();
    // const route = useRoute();

    const data = reactive({
      top: false,
    });

    let { proxy } = getCurrentInstance(); //此方法在开发环境以及生产环境下都能放到组件上下文对象

    function handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 300 ? (data.top = true) : (data.top = false);
      console.log("scr", scrolltop);

      proxy.scrollTop = scrolltop;
    }


    let Jump = (i) => {
      console.log(router);
      console.log("ssss");
      router.push({
        // path: "special",
        path: "/special",
        query: { id: i },
      });
      
    };

    function goTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-proxy.scrollTop / 10);
        document.documentElement.scrollTop = document.body.scrollTop =
          proxy.scrollTop + ispeed;
        if (proxy.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10);
    }

    let state = reactive({
      index_img: null,
    });

    getsubject_lists().then((data) => {
      state.index_img = data.index_img;
      console.log(data.index_img);
      console.log("ss", state.index_img);
    });

    return {
      state,
      // top:false,
      handleScroll,
      data,
      goTop,
      Jump,
    };
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },

  beforeUnmount() {
    // 移除事件监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/mobliebase.css";

body {
  background-color: #f5f7f9;
}

.subjectview {
  .top {
    position: fixed;
    right: 0px;
    background-color: #ffd338;
    width: 40px;
    height: 40px;
    top: 480px;
    background: url(../assets/img/person_icon.png) center center no-repeat;
    background-position: 9px -360px;
    // background-size: 20px;
    background-color: #e6e6e6;
    border-radius: 50px;
    // text-align: center;
    right: 22px;
  }

  .subject {
    padding: 16px 16px 0 16px;

    .subject-item {
      width: 100%;
      margin-bottom: 16px;
      box-shadow: 0 3px 0 0 rgb(0 0 0 / 5%);

      .img {
        img {
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }

      p {
        padding: 11px 11px 19px 11px;
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }

    //     .content {
    //   width: 100%;
    //   padding: 12px 12px 0 12px;
    //   box-sizing: border-box;
    //   background-color: #f5f7f9;
    //   .img {
    //     img {
    //       border-radius: 6px;
    //     }
    //   }
    // }
    // .text {
    //   margin-top: 12px;
    //   padding-bottom: 12px;
    //   a {
    //     display: block;
    //     font-size: 14px;
    //     color: #2e3033;
    //     line-height: 18px;
    //     width: 100%;
    //     height: 18px;
    //   }
    // }
    // .list {
    //   width: 100%;
    //   padding: 0 21px;
    //   box-sizing: border-box;
    //   margin-bottom: 16px;
    //   background: #fff;
    //   &.cons {
    //     margin-bottom: 0px;
    //   }
    //   .titles {
    //     color: #2e3033;
    //     padding-top: 17px;
    //     padding-bottom: 17px;
    //     font-size: 18px;
    //   }
    //   .list_first {
    //     display: flex;
    //     margin-bottom: 16px;
    //     &.list_firstcon {
    //       padding-bottom: 16px;
    //     }
    //     .img {
    //       width: 69px;
    //       height: 92px;
    //       margin-right: 8px;
    //       img {
    //         border-radius: 4px;
    //         height: 100%;
    //       }
    //     }
    //   }
    //   .newbook {
    //     display: flex;
    //     width: 100%;
    //     justify-content: space-between;
    //     .newbook_item {
    //       width: 50%;
    //       display: flex;
    //       margin-bottom: 16px;
    //       .img {
    //         width: 50px;
    //         height: 66px;
    //         margin-right: 8px;
    //         img {
    //           height: 100%;
    //           border-radius: 4px;
    //         }
    //       }
    //     }
    //     .newbook_text {
    //       p {
    //         display: -webkit-box;
    //         -webkit-line-clamp: 2;
    //         -webkit-box-orient: vertical;
    //         overflow: hidden;
    //         color: #2e3033;
    //         font-size: 14px;
    //         margin-bottom: 4px;
    //         width: 100px;
    //       }
    //       span {
    //         font-size: 12px;
    //         color: #8a8f99;
    //       }
    //     }
    //   }
    // }
    // .list_text {
    //   width: 73%;
    //   h2 {
    //     font-size: 14px;
    //     margin-top: 2px;
    //   }
    //   p {
    //     margin-top: 4px;
    //     margin-bottom: 8px;
    //     font-size: 12px;
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     display: -webkit-box;
    //     -webkit-line-clamp: 2;
    //     -webkit-box-orient: vertical;
    //     color: #8a8f99;
    //     line-height: 19px;
    //   }
    //   .text_bottom {
    //     font-size: 12px;
    //     color: #8a8f99;
    //   }
    // }
    // .list_second {
    //   display: flex;
    //   justify-content: space-between;
    //   .list_item {
    //     margin-bottom: 16px;
    //     .img {
    //       margin-bottom: 16px;
    //     }
    //   }
    //   .img {
    //     width: 68px;
    //     height: 91px;
    //     img {
    //       border-radius: 6px;
    //     }
    //   }
    //   .book_title {
    //     width: 68px;
    //     color: #2e3033;
    //     font-size: 14px;
    //     margin-top: 6px;
    //     display: -webkit-box;
    //     -webkit-line-clamp: 2;
    //     -webkit-box-orient: vertical;
    //     overflow: hidden;
    //   }
    //   .author {
    //     color: #8a8f99;
    //     font-size: 12px;
    //   }
    // }
    // .footer {
    //   padding: 21px 35px;
    //   box-sizing: border-box;
    //   .footer_first {
    //     display: flex;
    //     justify-content: space-between;
    //     padding-left: 39px;
    //     padding-right: 29px;
    //     margin-bottom: 14px;
    //     a {
    //       display: block;
    //       color: #2e3033;
    //       font-size: 12px;
    //       height: 22px;
    //       display: flex;
    //       align-items: center;
    //       &.con {
    //         background-color: #ffd338;
    //         border-radius: 10px;
    //         padding: 0 10px;
    //       }
    //     }
    //   }
    //   .footer_last {
    //     color: #2e3033;
    //     text-align: center;
    //     & > div {
    //       color: #2e3033;
    //       font-size: 10px;
    //       & > a {
    //         color: #2e3033;
    //         font-size: 10px;
    //       }
    //     }
    //   }
    // }
    // .list_two {
    //   padding: 0 20px;
    //   background-color: #fff;
    //   margin-bottom: 16px;
    //   .titles {
    //     color: #2e3033;
    //     padding-top: 17px;
    //     padding-bottom: 17px;
    //     font-size: 18px;
    //   }
    // }
    // .list_two_item {
    //   display: flex;
    //   box-sizing: border-box;
    //   justify-content: space-between;
    //   // .list_two_item2 {
    //   //   margin-bottom: 16px;
    //   //   .img {
    //   //     width: 87px;
    //   //     height: 116px;
    //   //     img {
    //   //       height: 100%;
    //   //     }
    //   //   }
    //   //   p {
    //   //     width: 87px;
    //   //     color: #2e3033;
    //   //     font-size: 14px;
    //   //     margin: 4px 0;

    //   //   }
    //   //   span {
    //   //     color: #8a8f99;
    //   //     font-size: 12px;
    //   //   }
    //   // }
    // }
  }
}
</style>